<script lang="ts" setup>
  import LoginForm from '@renderer/components/LoginForm.vue'

  const isLoggedIn = ref(false)
  const loginForm = ref({
    username: '',
    password: '',
    remember: false
  })

  const userInfo = ref({
    username: '张三',
    email: 'zhangsan@example.com',
    stats: {
      tests: 42,
      avgSpeed: 65,
      highestSpeed: 95
    }
  })

  function handleLogout() {
    isLoggedIn.value = false
    loginForm.value = {
      username: '',
      password: '',
      remember: false
    }
  }
</script>
<template>
  <section class="section mx-auto p-6 h-full">
    <div v-if="!isLoggedIn" class="flex h-full items-center justify-center">
      <LoginForm />
    </div>

    <div v-else class="useprofile">
      <div class="mb-6 flex items-center">
        <div
          class="text-2xl font-bold m4 rounded-full bg-indigo-600 flex h-16 w-16 items-center justify-center"
        >
          {{ userInfo.username.charAt(0).toUpperCase() }}
        </div>
        <div>
          <h4 class="text-lg font-medium">{{ userInfo.username }}</h4>
          <p class="text-gray-400">{{ userInfo.email }}</p>
        </div>
      </div>

      <div class="usestats mb-6 gap-4 grid grid-cols-3">
        <div class="stat-card bordegray-700 p-4 text-center border rounded-lg">
          <p class="text-2xl text-indigo-400 font-bold">{{ userInfo.stats.tests }}</p>
          <p class="text-sm text-gray-400">测试次数</p>
        </div>
        <div class="stat-card bordegray-700 p-4 text-center border rounded-lg">
          <p class="text-2xl text-green-400 font-bold">{{ userInfo.stats.avgSpeed }}</p>
          <p class="text-sm text-gray-400">平均速度</p>
        </div>
        <div class="stat-card bordegray-700 p-4 text-center border rounded-lg">
          <p class="text-2xl text-yellow-400 font-bold">{{ userInfo.stats.highestSpeed }}</p>
          <p class="text-sm text-gray-400">最高速度</p>
        </div>
      </div>

      <button class="w-full" @click="handleLogout">退出登录</button>
    </div>
  </section>
</template>
